<template>
	<div class="ratingselect">
		<div class="rating-type">
			<span class="block positive" :class="{'active':selectType === 2}" @click="select(2, $event)">{{desc.all}}<em class="count">{{ratings.length}}</em></span>
			<span class="block positive" :class="{'active':selectType === 0}" @click="select(0, $event)">{{desc.positive}}<em class="count">{{positives.length}}</em></span>
			<span class="block negative" :class="{'active':selectType === 1}" @click="select(1, $event)">{{desc.negative}}<em class="count">{{negatives.length}}</em></span>
		</div>
		<div class="switch" :class="{'on':onlyContent}" @click="togglecontent">
			<i class="icon-check_circle"></i>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;
	export default {
		props: {
			ratings: {
				type: Array,
				default() {
					return [];
				}
			},
			selectType: {
				type: Number,
				default: ALL
			},
			onlyContent: {
				type: Boolean,
				default: false
			},
			desc: {
				type: Object,
				default() {
					return {
						all: '全部',
						positive: '满意',
						negative: '不满意'
					};
				}
			}
		},
		computed: {
			positives() {
				return this.ratings.filter((rating) => {
					return rating.rateType === POSITIVE;
				});
			},
			negatives() {
				return this.ratings.filter((rating) => {
					return rating.rateType === NEGATIVE;
				});
			}
		},
		methods: {
			select(type, event) {
				if (!event._constructed) {
					return;
				}
				this.$emit('typeselect', type);
			},
			togglecontent(event) {
				if (!event._constructed) {
					return;
				}
				this.$emit('togglecontent', !this.onlyContent);
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin.styl"
	.ratingselect
		.rating-type
			padding 18px 0
			margin 0 18px
			font-size 0px
			border-1px(rgba(7, 17, 27, .2))
			.block
				display inline-block
				padding 8px 12px
				margin-right 8px
				border-radius 1px
				color rgb(77, 85, 93)
				line-height 16px
				font-size 12px
				.count
					margin-left 2px
					font-size 8px
				&.active
					color #FFF
				&.positive
					background-color rgba(0, 160, 220, .2)
					&.active
						background-color rgb(0, 160, 220)
				&.negative
					background-color rgba(78, 85, 93, .2)
					&.active
						background-color rgb(78, 85, 93)
		.switch
			padding 12px 18px
			line-height 24px
			border-bottom 1px solid rgba(7, 17, 27, .1)
			color rgb(147, 153, 159)
			font-size 0px
			&.on
				.icon-check_circle
					color #00C850
			.icon-check_circle
				display inline-block
				vertical-align top
				margin-right 4px
				font-size 24px
			.text
				display inline-block
				vertical-align top
				font-size 12px

</style>